<template>
  <!-- 推荐歌单详情页 列表部分 -->
  <div class="ListViewMain">
    <div class="playlist-top">
      <div class="left">
        <span class="iconfont icon-bofang"></span>
        <div class="title">播放全部</div>
        <div class="count">(共{{ playlist.tracks.length }}首)</div>
      </div>
      <div class="right">
        <div class="collect">
          <span class="iconfont icon-jiahao1"></span>
          <span>收藏</span>
          <span>({{ changeValue(playlist.subscribedCount) }})</span>
        </div>
      </div>
    </div>

    <div class="playlist-main">
      <div
        class="playItem"
        v-for="(item, index) in playlist.tracks"
        :key="index"
      >
        <div class="itemLeft">
          <div class="index">{{ index + 1 }}</div>
          <div class="content">
            <div class="title">
              {{ item.name }}
            </div>
            <div class="author">{{ item.ar[0].name }}-{{ item.al.name }}</div>
          </div>
        </div>
        <div class="itemRight">
          <span class="iconfont icon-bofang1" @click="setPlayIndex(index)"></span>
          <span class="iconfont icon-diandiandianshu"></span>
        </div>
      </div>
    </div>
  </div>
</template>
      
<script>
import { mapState, mapMutations } from "vuex";
export default {
  setup() {
    function changeValue(num) {
      let res = 0;
      if (num >= 100000000) {
        res = num / 100000000;
        // 保留两位小数
        res = res.toFixed(2) + "亿";
      } else if (num >= 10000) {
        res = num / 10000;
        res = res.toFixed(2) + "万";
      }
      return res;
    }
    return { changeValue };
  },
  props: ["playlist"],
  methods: {
    ...mapMutations(['setPlayIndex'])
  },
};
</script>
      
<style lang="less" scoped>
.ListViewMain {
  width: 7.5rem;
  padding: 0.26rem 0.2rem;
  background: #fff;
  border-radius: 0.26rem 0.26rem 0 0;
  margin-top: 0.2rem;
  .playlist-top {
    // background-color: #ccc;
    display: flex;
    justify-content: space-between;
    height: 0.8rem;
    line-height: 0.8rem;
    .left {
      display: flex;
      align-items: center;
      .iconfont {
        font-size: 0.6rem;
      }
      .title {
        font-weight: bold;
        margin-left: 0.2rem;
      }
    }
    .collect {
      background: rgb(248, 10, 10);
      border-radius: 0.5rem;
      color: #fff;
      padding: 0 0.2rem;
      font-size: 0.26rem;
    }
  }
  .playlist-main {
    margin: 0.2rem 0 1.2rem 0;
    .playItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.3rem;
      .itemLeft {
        display: flex;
        align-items: center;
        .index {
          width: 0.5rem;
          text-align: center;
          color: rgb(177, 174, 174);
          font-size: 0.4rem;
          margin-right: 0.3rem;
        }
        .title {
          // font-weight: bold;
          font-size: 0.3rem;
          line-height: 0.5rem;
        }
        .author {
          color: rgb(189, 189, 189);
          font-size: 0.22rem;
        }
      }
      .itemRight {
        .iconfont {
          font-size: 0.3rem;
        }
        .icon-bofang1 {
          margin-right: 0.36rem;
        }
      }
    }
  }
}
</style>
      